<template>
  <div style="margin-left: 10px">
    <category-bar @categorySelect="getNotes" ref="categoryBar"></category-bar>
    <notes ref="notes" @editInfo="handleEditInfo" @addNote="handleAddNote" @updateInfo="getNotes" @editCategory="handleEditCategory"></notes>
    <note-edit-form ref="noteEditForm" @updateInfo="getNotes"></note-edit-form>
  </div>
</template>

<script>
import Notes from "./Notes";
import CategoryBar from "./CategoryBar";
import NoteEditForm from "./NoteEditForm";

export default {
  name: "Bookshelf",
  components:{Notes,CategoryBar,NoteEditForm},
  data() {
    return {

    }
  },
  methods: {
    getNotes(){
      var _this = this
      var currentCid = this.$refs.categoryBar.currentCid
      this.$router.push({
        query:{
          cid:currentCid
        }
      }).catch(data => {  })
      this.axios.get('categories/'+currentCid+'/notes')
        .then(function (response) {
          if(response.status === 200){
            _this.$refs.notes.showNotes(response.data)
          }
        })
    },

    handleEditInfo(noteInfo){
      this.$refs.noteEditForm.dialogFormVisible = true
      this.$refs.noteEditForm.isCreate = false
      this.$refs.noteEditForm.form = noteInfo
    },

    handleAddNote(){
      var currentCid = this.$refs.categoryBar.currentCid
      this.$refs.noteEditForm.dialogFormVisible = true
      this.$refs.noteEditForm.isCreate = true
      this.$refs.noteEditForm.form = {}
      this.$refs.noteEditForm.cid = currentCid
    },

    handleEditCategory(){
      this.$refs.categoryBar.edit()
    },


  }

}
</script>

<style>
.el-tabs__item {
  height: 20px!important;
  line-height: 20px!important;
  font-size: 12px;
}

.el-tabs__item.is-active {
  font-weight: bolder!important;
}

</style>
